<template>
  <el-container>
    <!--左侧-->
    <el-aside :width="isCollapse? '64px':'200px'">
      <div>动力云客管理系统</div>
      <el-menu
          active-text-color="#ffd04b"
          background-color="#334157"
          class="el-menu-vertical-demo"
          :default-active="currentRouter"
          text-color="#fff"
          @open="handleOpen"
          @close="handleClose"
          style="border-right: solid 0px"
          :unique-opened="true"
          :collapse="isCollapse"
          :collapse-transition="false"
          :router="true"
          >
        <el-sub-menu :index='index' v-for="(menuPermission,index) in user.menuPermissionList" :key="menuPermission.id">
          <template #title>
            <el-icon><component :is="menuPermission.icon"></component></el-icon>
            <span>{{menuPermission.name}}</span>
          </template>

          <el-menu-item
              v-for="permission in menuPermission.subPermissionList"
              :key="permission.id"
              :index="permission.url">
            <el-icon><component :is="permission.icon"></component></el-icon>
            {{permission.name}}
          </el-menu-item>
        </el-sub-menu>
      </el-menu>
    </el-aside>

    <!--右侧-->
    <el-container class="rightContent">
      <!--上-->
      <el-header>
        <el-icon class="show" @click="showMenu"><Fold /></el-icon>

        <el-dropdown :hide-on-click="false">
          <span class="el-dropdown-link">
            {{user.name}}
          <el-icon class="el-icon--right"><arrow-down /></el-icon>
          </span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item>我的资料</el-dropdown-item>
              <el-dropdown-item>修改密码</el-dropdown-item>
              <el-dropdown-item divided @click="logout">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </el-header>

      <!--中-->
      <el-main>
        <router-view v-if="isRouterAlive"/>
      </el-main>

      <!--下-->
      <el-footer>
        动力云客管理系统
      </el-footer>
    </el-container>
  </el-container>
</template>

<script>
import {doGet} from "../http/httpRequest.js";
import {massageTip, messageConfirm, removeToken} from "../utils/util.js";

export default {
  name: 'DashboardView',
  data(){
    return{
      // 默认菜单页是展开的
      isCollapse: false,
      user:{},
      isRouterAlive: true,
      currentRouter: ''
    }
  },

  // 提供者
  provide(){
    return {
      reload: ()=> {
        this.isRouterAlive=false;
        // $nextTick()：当数据更新，在DOM中渲染后，自动执行该函数
        this.$nextTick(function (){
          this.isRouterAlive = true;
        })
      },
    }
  },
  // 使用Vue的钩子函数加载数据
  mounted() {
    this.loadLoginUser();
    this.loadCurrentRouterPath();
  },
  methods:{
    // 切换菜单栏的展开状态
    showMenu(){
      this.isCollapse=!this.isCollapse
    },
    // 加载当前登录用户
    loadLoginUser(){
      doGet('/api/login/info',{}).then((resp)=>{
        this.user=resp.data.data
      })
    },
    // 退出登录
    logout(){
      doGet('/api/logout',{}).then((resp)=>{
        if (resp.data.code===200){
          removeToken();
          massageTip('成功退出','success')
          window.location.href='/'
        }else {
          messageConfirm('退出异常，是否强制退出').then(()=>{
            removeToken()
            window.location.href='/'
          }).catch(()=>{
            massageTip('取消强制退出','warning')
          })
        }
      })
    },

    // 加载路径
    loadCurrentRouterPath(){
      let path = this.$route.path;
      let arr = path.split('/');
      if (arr.length > 3){
        this.currentRouter="/"+arr[1]+"/"+arr[2]
      }else {
        this.currentRouter=path;
      }
    }
  }
}
</script>

<style scoped>
.el-aside {
  background: black;
}
.el-header {
  background: deepskyblue;
  height: 35px;
  line-height: 35px;
}
.rightContent {
  height: calc(100vh);
}
.el-footer {
  background: deepskyblue;
  height: 35px;
  text-align: center;
  line-height: 35px;
}
div {
  color: skyblue;
  height: 35px;
  text-align: center;
  line-height: 35px;
}
.show {
  cursor:pointer;
}
.el-dropdown {
  color: black;
  float: right;
  height: 35px;
  line-height: 35px;
  text-align: center;
}
</style>